<template>
    <div>
        <van-swipe :autoplay="3000" :height="300">
            <van-swipe-item v-for="(item,index) in bannerList" :key="index">
                <img :src="item.imgUrl">
            </van-swipe-item>
        </van-swipe>
        <div class="content">
            <div class="card">
                <div class="self" @click="goBuy">
                    <img src="./images/self.png" alt="">
                    <div class="title">
                        <h1>自取</h1>
                        <span>即刻点餐</span>
                    </div>
                </div>
                <div style="height:100%;width:2px;background-color: #f8f8f8;"></div>
                <div class="take-out" @click="goBuy">
                    <img style="width: 60px;height: 60px;" src="./images/waimai.png" alt="">
                    <div class="title">
                        <h1>外卖</h1>
                        <span>无接触送</span>
                    </div>
                </div>
            </div>
            <div class="card2">
                <div class="info">
                    <div class="user-info">
                        <div class="user-name" v-if="username">
                            <span class="name">{{ username }}</span>
                            <div class="bar">初级茶粉</div>
                        </div>
						<div class="user-name" v-else>
						    <span class="name">请您先登录...</span>
						</div>
                        <div class="more" @click="handlerClick">点击查看更多会员权益<span class="iconfont icon-youjiantou"></span></div>
                    </div>
                    <div class="num" @click="$router.push('/integralshop/integraldetailed').catch(()=>{})">
                        <span>{{ integral?integral:'0' }}</span>
                        <span class="mini">积分</span>
                    </div>
                    <div class="coupon" @click="$router.push('/voucher').catch(()=>{})">
                        <span>0</span>
                        <span class="mini">优惠券</span>
                    </div>
                </div>
                <ul class="menu">
                    <li class="menu-item" v-for="(item,index) in menuList" @click="goOtherShop(item.path)">
                        <span class="iconfont icon" :class="item.icon"></span>
                        <span class="title">{{item.title}}</span>
                    </li>
                </ul>
            </div>
            <p>新鲜事</p>
            <div class="card3">
                <img src="@/views/Home/images/banner9.jpeg" alt="">
            </div>
            <div class="card3">
                <img src="@/views/Home/images/banner10.jpeg" alt="">
            </div>
        </div>
        <Tabbar/>
    </div>
</template>

<script>
import { Toast } from 'vant';
import { mapGetters } from 'vuex';
export default {
    name: 'Home',
    data() {
        return {
            bannerList: [
                {imgUrl: './images/banner5.jpeg'},
                {imgUrl: './images/banner9.jpeg'},
                {imgUrl: './images/banner10.jpeg'},
            ],
            menuList: [
                {path: '/integralshop', title: '积分商城', icon:'icon-jifenshangcheng'},
                {path: '', title: '周边商城', icon:'icon-dianpu'},
                {path: '', title: '团餐', icon:'icon-gouwu'},
                {path: '/giftexchange', title: '礼券兑换', icon:'icon-9'}
            ]
        }
    },
    methods: {
        goBuy() {
            this.$router.push('/buy');
        },
        goOtherShop(path) {
            if (path) {
                this.$router.push(path).catch(() => {});
            } else {
                Toast('敬请期待～');
            }
        },
        handlerClick() {
            Toast('敬请期待～');
        }
    },
    computed: {
    ...mapGetters('user',['integral','username'])
  },
  mounted() {
    let id = this.$store.state.login.userInfo.id;
    this.$store.dispatch('user/asyncAllSetUserInfo', id);
  }
}
</script>

<style lang="less" scoped>
img {
    width: 100%;
    height: 100%;
}
.content {
    background-color: #f8f8f8;
    position: relative;
    padding: 85px 5% 5%;
    margin-bottom: 50px;
    .card {
        position: absolute;
        margin: 0 auto;
        top: -30px;
        background-color: #fff;
        width: 90%;
        height: 100px;
        border-radius: .8rem;
        box-shadow: 0 0 .8rem rgba(0, 0, 0, .2);
        box-sizing: border-box;
        display: flex;
        justify-content: space-between;
        padding: 10px 30px;
        .self, .take-out {
            display: flex;
            align-items: center;
            img {
                width: 70px;
                height: 70px;
                margin-right: 5px;
            }
            .title {
                font-size: 10px;
                display: flex;
                flex-direction: column;
                justify-content: space-between;
                align-items: center;
                padding: 10px 0 0 0;
                h1 {
                    font-size: 20px;
                    color: #143b9c;
                    font-weight: bolder;
                    margin-bottom: 10px;
                }
            }
        }
    }
    .card2 {
        height: 200px;
        background-color: #fff;
        border-radius: .8rem;
        box-shadow: 0 0 .8rem rgba(0, 0, 0, .2);
        box-sizing: border-box;
        padding: 20px;
        display: flex;
        flex-direction: column;
        .info {
            height: 70px;
            border-bottom: 1px solid #e8e7e7;
            padding-bottom: 20px;
            box-sizing: border-box;
            display: flex;
            .user-info {
                flex: 1;
                display: flex;
                flex-direction: column;
                justify-content: space-around;
                .user-name {
                    display: flex;
                    .name {
                        height: 20px;
                        box-sizing: border-box;
                        font-size: 16px;
                        text-align: center;
                        display: flex;
                        align-items: center;
                    }
                    .bar {
                        height: 20px;
                        background-color: #f7b844;
                        box-sizing: border-box;
                        font-size: 10px;
                        padding: 3px 5px;
                        text-align: center;
                        display: flex;
                        align-items: center;
                        border-radius: 15px;
                        margin-left: 5px;
                    }
                }
                .more {
                    font-size: 12px;
                    font-weight: 300;
                    color: #999;
                    display: flex;
                    align-items: center;
                }
            }
            .num {
                border-right: 1px solid #e8e7e7;
                padding-right: 5px;
            }
            .coupon {
                padding-left: 5px;
            }
            .num, .coupon {
                width: 50px;
                display: flex;
                flex-direction: column;
                align-items: center;
                justify-content: space-around;
                .mini {
                    font-size: 12px;
                    font-weight: 400;
                }
            }
        }
        .menu {
            display: flex;
            flex: 1;
            padding-top: 20px;
            .menu-item {
                display: flex;
                flex: 1;
                flex-direction: column;
                align-items: center;
                padding: 5px;
                justify-content: space-around;
                .icon {
                    font-size: 30px;
                    color: #143ea9;
                    font-weight: 400;
                }
                .title {
                    font-size: 13px;
                }
            }
        }
    }
    p {
        margin-top: 20px;
        margin-bottom: 20px;
        font-size: 13px;
    }
    .card3 {
        height: 190px;
        background-color: #fff;
        border-radius: .8rem;
        box-sizing: border-box;
        margin-top: 10px;
        overflow: hidden;
    }
}
</style>